<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/login.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个spacer用来占位 -->
        <span class="spacer"></span>

        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

    <!-- 页面主题 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <!-- .card表示用户信息 -->
            <div class="card">
                <img src="./image/profile.jpg" alt="">
                <h3>frost-cold</h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>
        </div>

        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- 表示一篇博客 -->
            <div class="blog">
                <div class="title">这是第一篇博客</div>
                <div class="date">2024-05-02 12:00:00</div>
                <div class="desc">今日事今日毕 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur, quaerat harum, ad quia quos maxime nostrum consectetur sequi architecto laborum quas facilis nulla provident neque. Inventore recusandae pariatur fuga quaerat?</div>
                <a href="#">查看全文 &gt;&gt; </a>
            </div>

            <div class="blog">
                <div class="title">这是第二篇博客</div>
                <div class="date">2024-05-02 12:00:00</div>
                <div class="desc">今日事今日毕 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur, quaerat harum, ad quia quos maxime nostrum consectetur sequi architecto laborum quas facilis nulla provident neque. Inventore recusandae pariatur fuga quaerat?</div>
                <a href="#">查看全文 &gt;&gt; </a>
            </div>

            <div class="blog">
                <div class="title">这是第二篇博客</div>
                <div class="date">2024-05-02 12:00:00</div>
                <div class="desc">今日事今日毕 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur, quaerat harum, ad quia quos maxime nostrum consectetur sequi architecto laborum quas facilis nulla provident neque. Inventore recusandae pariatur fuga quaerat?</div>
                <a href="#">查看全文 &gt;&gt; </a>
            </div>
        </div>
    </div>
</body>
</html>